/******************** 变量 ********************/
$tag-item-padding-top-bottom: 0.01rem;

/******************** mixin ********************/

/******************** 组件 ********************/

.lv-tag-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-base;
}

.lv-tag-item {
  display: flex;
  align-items: center;
  margin: $margin-xs $margin-sm $margin-xs 0;
  padding: $tag-item-padding-top-bottom $padding-sm;
  font-size: $font-size-base;
  line-height: $line-height-base;
  background: $tag-item-bg-color;
  border-radius: $border-radius-md;

  &.lv-tab-item-removable {
    padding: $tag-item-padding-top-bottom $padding-xs $tag-item-padding-top-bottom $padding-sm;
  }

  .lv-tag-text {
    color: $text-color;

    &:last-child {
      overflow: hidden;
    }
  }

  .lv-tag-remove {
    flex-shrink: 0;
    @include icon-size;

    margin-left: $margin-xs;
    color: $icon-color;
    cursor: pointer;

    @include motion-state;
  }

  &.disabled {
    color: $tag-item-color-disabled;
    background-color: $tag-item-bg-color-disabled;
    cursor: not-allowed;

    .lv-tag-text,
    .lv-tag-remove {
      color: $tag-item-color-disabled;
      cursor: not-allowed;
    }
  }

  &:not(.disabled) {
    .lv-tag-remove:hover {
      color: $icon-color-hover;
    }

    .lv-tag-remove:active {
      color: $tag-item-remove-active;
    }
  }
}

.lv-tag-clear {
  display: inline-block;
  margin-left: $margin-xs;
  color: $text-color-link;
  font-size: $font-size-base;
  cursor: pointer;

  @include motion-state;

  &:hover {
    color: $primary-color-hover;
  }

  &:active {
    color: $primary-color-active;
  }

  &.disabled {
    color: $tag-item-color-disabled;
    cursor: not-allowed;
  }
}

.lv-tag-alarm {
  height: 0.18rem;
  color: $tag-item-alarm-color;
  font-size: $font-size-sm;
  line-height: $line-height-sm;
  border-radius: 0.12rem;

  .lv-tag-main {
    display: inline-flex;
    padding: 0 $padding-sm;
    color: currentcolor;
    font-weight: $font-weight-bold;
    font-size: $font-size-sm;
    line-height: $line-height-sm;
  }

  &-critical {
    color: $text-color-inverse;
    background-color: $alarm-color-critical;
  }

  &-major {
    background-color: $alarm-color-major;
  }

  &-minor {
    background-color: $alarm-color-minor;
  }

  &-warning {
    background-color: $alarm-color-warning;
  }
}

.lv-tag-checkable {
  .lv-tag-item {
    &:not(.disabled) {
      cursor: pointer;

      &:hover {
        &:not(&.lv-tag-item-checked) {
          background-color: $tag-item-bg-color-hover;
        }
      }

      &:active {
        background-color: $tag-item-bg-color-active;
      }
    }

    &-checked {
      background-color: $tag-item-bg-color-active;
    }
  }
}
